<template>
    <div class="theme">
        <el-tooltip class="box-item" effect="dark" :content="isDark ? 'Light' : 'Dark'" placement="bottom">
            <el-icon size="24px" @click="changeTheme">
                <component :is="isDark ? 'Sunny' : 'Moon'"></component>
            </el-icon>
        </el-tooltip>
    </div>
</template>

<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark({
    selector: 'html',
    attribute: 'class',
    valueDark: 'dark',
    valueLight: 'light',
})

const changeTheme = () => {
    const toggleDark = useToggle(isDark)
    toggleDark()
}

</script>

<style lang="scss" scoped>
@import "@/style/mixin.scss";

.theme {
    cursor: pointer;
    height: 100%;
    width: 38px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
        @include hover_bg_color;
    }
}
</style>